<template>
  <div class="cp">
    <table class="ml-table">
      <thead class="m-head">
        <tr class="m-tr">
          <th class="m-td" v-for="(item, index) in thead" :key="index">
            <div class="m-cell">{{ item }}</div>
          </th>
        </tr>
      </thead>
      <tbody class="m-body">
        <tr
          is="ml-table-tr"
          v-for="item in tbody"
          :item="item"
          tag="tr"
          :key="item.departmentId || item.userId"
        ></tr>
      </tbody>
    </table>
  </div>
</template>
<script>
import mlTableTr from "@/components/page/home/mlTableTr.vue";
export default {
  name: "mlTable",
  components: { mlTableTr },
  props: {
    thead: {
      type: Array
    },
    tbody: {
      type: Array
    }
  },
  data: () => ({})
};
</script>
<style lang="scss">
.cp {
  .ml-table {
    width: 100%;
    .m-head {
      color: #909399;
      font-weight: 500;
    }
    .m-body {
      font-size: 14px;
      color: #606266;
    }
    .m-tr {
      background-color: #fff;
    }
    .m-td {
      padding: 12px 0;
      border-bottom: 1px solid #ebeef5;
    }
    .m-cell {
      padding: 0 10px;
    }
  }
}
</style>
